<template>
    <p>这是一个home页</p>
    <h1>js路由跳转</h1>
    <button @click="pushStr">字符串</button>
    <button @click="pushPath">push-path-跳转</button>
    <button @click="pushPathQuery">push-path-query</button>
    <button @click="pushName">push-name</button>
    <button @click="pushNameParams">push-name-params</button>
    <button @click="pushDynRouteByPath">动态路由-path-传参</button>
    <button @click="pushDynRouteByName">动态路由-name-传参</button>
    <button @click="pushDynRouteMulParams">动态路由-多个入参</button>
    <h1>Vuex</h1>
    <button @click="updateVuexCount">修改count</button>
    <button @click="updateVuexCountByObj">修改count-对象方式</button>
    <button @click="getCount">actions-接口请求</button>
    <button @click="getCountByObj">actions-接口请求-对象方式</button>
    <h1>Vuex module</h1>
    <button @click="commitIncreaseA">触发-moduleA-muations</button>
    <button @click="commitAsyncIncreaseA">触发-moduleA-actions</button>
    <button @click="commitIncreaseB">触发-moduleB-muations</button>
    <button @click="commitAsyncIncreaseB">触发-moduleB-actions</button>
    <button @click="moduleComGloMut">触发-moduleB-触发全局mutation</button>
    <button @click="moduleComGloAct">触发-moduleB-触发全局action</button>
</template>

<script>
export default {
    methods: {
        pushStr() {
            this.$router.push('/about')
        },
        pushPath() {
            this.$router.push({ path: '/about' })
        },
        pushPathQuery() {
            this.$router.push({ path: '/about', query: { name: 'tom' } })
        },
        pushName() {
            this.$router.push({ name: 'about' })
        },
        pushNameParams() {
            this.$router.push({ name: 'about',  state: { params:{name:'tom',id:1} } })
        },
        pushDynRouteByName(){
            this.$router.push({name:'product', params:{id:456}})
        },
        pushDynRouteByPath(){
            const id = 123;
            this.$router.push({path: '/product' + '/' + id})
        },
        pushDynRouteMulParams(){
            this.$router.push({name:'product', params:{id:123,name:'tom'}})
        },
        updateVuexCount(){
            this.$store.commit('incrementMut',{count:20})
        },
        updateVuexCountByObj(){
            this.$store.commit({
                type:'incrementMut',
                count:30
            })
        },
        getCount(){
            this.$store.dispatch('incrementAct',{count:200})
        },
        getCountByObj(){
            this.$store.dispatch({
                type:'incrementAct',
                count:200
            })
        },
        commitIncreaseA(){
            this.$store.commit('increaseA')
        },
        commitAsyncIncreaseA(){
            this.$store.dispatch('asyncIncreaseA')
        },
        commitIncreaseB(){
            this.$store.commit('b/increaseB')
        },
        commitAsyncIncreaseB(){
            this.$store.dispatch('b/asyncIncreaseB')
        },
        moduleComGloMut(){
            this.$store.dispatch('b/asyncGloBalMut',{count:1000})
        },
        moduleComGloAct(){
            this.$store.dispatch('b/asyncGloBalAct',{count:2000})
        }
    },
    mounted() {
        console.log("this.$route", this.$route);
        console.log("this.$router", this.$router);
    }
}
</script>